<template>
  <div class="mineLi">
    <div class="li" v-for="(item,index) in form" :key="index">
      <div class="tip" v-if="item.task_type === 1">{{item.user_fit_cash}}元</div>
      <div class="tip" v-if="item.task_type === 2">{{item.user_fit_score}}工分</div>
      <div class="tip3" v-if="item.task_type === 3" @click.stop="imagePreview(item.prizes_img_url)">
        <img :src="item.prizes_img_url" alt="">
      </div>
      <div class="details">
        <div class="left">
          <img :src="item.img_url" alt="">
        </div>
        <div class="right">
          <div class="div">{{item.title}}</div>
          <div class="div">{{item.short_intro}}</div>
          <div class="img">
            <img src="@/assets/images/ic_stars.png" alt="" v-for="i in item.difficulty_star">
            <img src="@/assets/images/ic_stars2.png" alt="" v-for="i in (5-item.difficulty_star)">
          </div>
        </div>
      </div>
      <div class="sp1"><span>兑换ID：{{item.exchange_no}}</span></div>
      <div class="sp2" v-show="item.status === 1||(item.status === 4 &&item.allow_submit_again===1)"><span>剩余时间：{{item.last_time}}</span>
      </div>
      <div class="sp2" v-show="item.status === 2"><span>提交时间：{{item.audit_time}}</span></div>
      <div class="sp2" v-show="item.status === 3"><span>审核时间：{{item.pass_time}}</span></div>
      <div class="sp2" v-show="item.status === 4"><span>拒绝时间：{{item.fail_time}}</span></div>
      <div class="sp2" v-show="item.status === 4"><span>拒绝原因：{{item.fail_remark}}</span></div>
      <div class="sp2" v-show="item.status === 5"><span>作废时间：{{item.cancel_time}}</span></div>
      <div class="btn" v-if="item.status === 1||(item.status === 4&&item.allow_submit_again === 1)">
        <input class="groupBtn" type="button" value="去完成" @click="goDetails(item.user_task_id)">
        <input class="groupBtn" type="button" value="上传凭证" @click="uploadDocuments(item)" v-show="item.status !== 4">
        <input class="againGroupBtn" type="button" value="再次上传凭证" @click="uploadDocuments(item)"
               v-show="item.status === 4">
      </div>
      <div class="statebtn">
        <input class="statebtn1" type="button" value="待审核" v-show="item.status === 2">
        <input class="statebtn2" type="button" value="已通过" v-show="item.status === 3">
        <input class="statebtn3" type="button" value="未通过" v-show="item.status === 4">
        <input class="statebtn4" type="button" value="已作废" v-show="item.status === 5">
      </div>
    </div>
  </div>
</template>

<script>
  /**
   *
   * @Author zzl
   * @Date 2019/5/17 10:11.
   */
  import {ImagePreview} from 'vant';
  import {Dialog} from 'vant';
  import {Indicator} from 'mint-ui';
  import utils from '@/lib/StringExtend'

  export default {
    mounted() {

    },
    components: {},
    props: {
      form: {
        default: []
      }
    },
    data() {
      return {}
    },
    computed: {},
    methods: {
      /**
       * go上传凭证
       */
      uploadDocuments(item) {
        this.$router.push({path: '/uploadDocuments', query: {form: JSON.stringify(item)}})
      },
      myTask(filters) {

      },
      /*
      * 查看图片
      * */
      imagePreview(imgUrl) {
        let imgArr = [];
        imgArr.push(imgUrl);
        ImagePreview(imgArr);
      },
      /*
      * go详情
      * */
      goDetails(id) {
        this.$router.push({path: '/lobbyDetails', query: {user_task_id: id}})
      },
    },
    watch: {},
    filters: {},
    beforeDestroy() {

    }
  }
</script>

<style lang="less" scoped>
  .mineLi {
    padding: 0 0.33rem;
    box-sizing: border-box;
    width: 100%;

    .li {
      position: relative;
      width: 100%;
      /*height: 4rem;*/
      border-bottom: 1px solid rgba(239, 239, 239, 0.5);
      padding-bottom: 0.2rem;

      .tip {
        font-size: 0.3rem;
        position: absolute;
        top: 0px;
        right: 0px;
        width: 1.42rem;
        height: 0.5rem;
        line-height: 0.5rem;
        background: #FF695A;
        -webkit-border-radius: 0 0 0.1rem 0.1rem;
        -moz-border-radius: 0 0 0.1rem 0.1rem;
        border-radius: 0 0 0.1rem 0.1rem;
        color: #FFFFFF;
        text-align: center;
      }

      .tip3 {
        position: absolute;
        top: 0.8rem;
        right: 0px;

        img {
          width: 1rem;
          height: 1rem;
        }
      }

      .details {
        width: 100%;
        height: 2.1rem;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;

        .left {
          width: 1.56rem;
          height: 1.56rem;
          margin-right: 0.2rem;

          img {
            width: 100%;
            height: 100%;
          }
        }

        .right {
          width: 5rem;
          height: 1.56rem;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.36rem;

          .div:first-child {
            text-align: left;
            word-break: break-all;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
          }

          div:nth-child(2) {
            width: 4rem;
            color: #a6a6a6;
            font-size: 0.26rem;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap
          }

          .img {
            display: flex;
            flex-direction: row;
            justify-content: left;

            img {
              width: 0.39rem;
              height: 0.38rem;
              margin-right: 0.16rem;
            }
          }
        }
      }

      .sp1, .sp2 {
        text-align: left;
        color: #a6a6a6;
        font-size: 0.26rem;
        line-height: 0.5rem;
      }

      .btn {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        margin-top: 0.1rem;

        .groupBtn {
          background: #FDCC4A;
          border-radius: 0.1rem;
          color: white;
          border: 0;
          width: 1.42rem;
          height: 0.5rem;
          margin-left: 0.18rem;
          font-size: 0.26rem;
        }

        .againGroupBtn {
          background: #FDCC4A;
          border-radius: 0.1rem;
          color: white;
          border: 0;
          width: 1.8rem;
          height: 0.5rem;
          margin-left: 0.18rem;
          font-size: 0.26rem;
        }

      }

      .statebtn {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        margin-top: 0.1rem;

        .statebtn1, .statebtn2, .statebtn3, .statebtn4 {
          width: 1.42rem;
          height: 0.5rem;
          border: 0;
          border-radius: 0.1rem;
          font-size: 0.26rem;
        }

        .statebtn1 {
          background: #FFF5DB;
          color: #FDCC4A;
        }

        .statebtn2 {
          color: #6EDC79;
          background: #E2F8E4;
        }

        .statebtn3 {
          color: #FF695A;
          background: #FFE1DE;
        }

        .statebtn4 {
          color: #CECFD3;
          background: #F5F5F6;
        }
      }
    }
  }
</style>
